import React, { Component } from "react"
import { Modal, Form, Space, Button, Select, Tooltip } from "antd";
import { QuestionCircleOutlined } from '@ant-design/icons';
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import { imMemberConfigList, imMemberConfigEdit, imPayManageList } from '@/request/wallet/revenueExpensesAccount';
const { Option } = Select
export default class Account extends Component {
  constructor() {
    super()
    this.FormRef = React.createRef()
    this.state = {
      columns: [
        {
          title: "应用场景",
          dataIndex: "sceneType",
          key: "sceneType",
          render: (text) => {
            let label = "";
            switch (text) {
              case 0:
                label = "钱包充值收款";
                break;
              case 1:
                label = "钱包提现出款";
                break;
              case 3:
                label = "线上店铺分账业务（支付宝)";
                break;
              case 4:
                label = "分享官提现";
                break;
            }
            return label;
          }
        },
        {
          title: "收出款类型",
          dataIndex: "paymentReceivedType",
          key: "paymentReceivedType",
          render: (text) => {
            let label = "";
            switch (text) {
              case 0:
                label = "收款";
                break;
              case 1:
                label = "出款";
                break;
              default:
                label = "字段值错误";
            }
            return label;
          }
        },
        {
          title: "所绑定账户",
          dataIndex: "txt",
          key: "txt",
          filterDropdown: true, // 自定义的列筛选功能，我们占位为信息提示Icon的位置
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => {
                return <span> 指对应业务场景下，平台所使用的资金账户（出款业务时请确保账户有足够资金） </span>
              }
              }  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
        },
        {
          title: "操作",
          dataIndex: "",
          key: "",
          render: (text, record, index) => {
            return <TheButton haspermi={['wallet:revenueExpensesAccount:switchAccounts']} onClick={() => this.edit(record)}>切换账户</TheButton>
          }
        },
      ],
      dataSource: [],
      isModalVisible: false,//切换账户弹窗展示
      accountList: [],
      imMemberConfigId: '',//主键id
    }

  }
  componentDidMount() {
    this.getData()
  }
  getData = async () => {
    let res = await imMemberConfigList()
    if (res.code === 0 && res.data) {
      this.setState({
        dataSource: res.data
      })
    }
  }
  //切换账户
  edit = (value) => {
    this.setState({
      isModalVisible: true,
      paymentReceivedType: value.paymentReceivedType,
      imMemberConfigId: value.imMemberConfigId
    })
    this.FormRef.current.setFieldsValue({
      accountId: value.accountId,
    })
    this.getImPayManage(value.paymentReceivedType)
  }
  // 账户配置数据
  getImPayManage = async (paymentReceivedType) => {
    let res = await imPayManageList({ payManageType: paymentReceivedType === 0 ? 'Alipay' : null })
    if (res.code === 0 && res.data) {
      this.setState({
        accountList: res.data
      })
    }
  }
  // 确认修改
  handleFinish = async (value) => {
    let txt = ''
    this.state.accountList.find(item => {
      if (item.id === value.accountId) {
        return txt = item.accountRemark
      }
    })
    let res = await imMemberConfigEdit({
      accountId: value.accountId,
      txt,
      imMemberConfigId: this.state.imMemberConfigId
    })
    if (res.code === 0) {
      React.$message({ type: 'success', content: '修改成功' })
      this.getData()
    }
    this.setState({
      isModalVisible: false,
    })
  }
  //关闭弹窗
  handleCancel = () => {
    this.FormRef.current.resetFields()
    this.setState({
      isModalVisible: false,
    })
  }
  render() {
    const { columns, dataSource, isModalVisible, paymentReceivedType, accountList, } = this.state
    let text = ''
    switch (paymentReceivedType) {
      case 0:
        text = "收款";
        break;
      case 1:
        text = "出款";
        break;
    }
    return (
      <div className="p-layout-box commodity-examine">
        <TheTable
          columns={columns}
          dataSource={dataSource}
        />
        <Modal title='切换账户' visible={isModalVisible} width="25%"
          footer={null} forceRender={true}
          onCancel={() => this.handleCancel()}
        >
          <Form
            labelCol={{
              span: 6,
            }}
            wrapperCol={{
              span: 14,
            }}
            ref={this.FormRef}
            onFinish={(values) => this.handleFinish(values)}
          >
            <Form.Item
              label="收出款类型"
              name="paymentReceivedType"
            >
              <text>{text}</text>
            </Form.Item>
            <Form.Item
              label="账户"
              name="accountId"
            >
              <Select >
                {
                  accountList.map(item => <Option key={item.id} value={item.id}>{item.accountRemark}</Option>)
                }
              </Select>

            </Form.Item>
            <Form.Item wrapperCol={{
              offset: 12,
              span: 16,
            }}>
              <Space size="small" style={{ marginLeft: 10 }}>

                <Button type="default" onClick={() => this.handleCancel()}>
                  取消
                </Button>
                <Button type="primary" htmlType="submit">
                  确定
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  }
}